<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>

    <div class="container">
      <ul style="margin-bottom: 0.66rem">
        <li
          :class="item.code == currLan ? 'db on' : 'db'"
          v-for="item in list"
          :key="item.id"
          @click="setLang(item.code)"
        >
          <!--          <img :src="item.icon" alt="">-->
          <div class="name flexs">{{ item.name }}</div>
          <div class="ico">
            <img
              v-if="item.code == currLan"
              src="../../assets/images/checked.png"
              alt=""
            />
            <img v-else src="../../assets/images/kuang.png" alt="" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from "vuex";

export default {
  data() {
    return {
      title: this.$t("title.doc33"),
      titleRight: this.$t("page.doc204"),
      list: [],
      currLan: "en_US",
    };
  },

  mounted() {
    this.currLan = localStorage.getItem("language") || "en_US";

    this.datainfo();
  },
  methods: {
    ...mapMutations(["SET_USERDATA", "SET_LANG"]),
    ...mapActions(["Get_userData,resetVuex"]),

    datainfo() {
      this.$post(this.URL.user.lang, {}).then((res) => {
        if (res.code == 0) {
          this.list = res.data;
        }
      });
    },

    onBtn() {
      localStorage.setItem("language", this.currLan);
      this.$i18n.locale = this.currLan;
      this.$Local(this.currLan);
      this.SET_LANG(this.currLan);
      this.$toast.success(this.$t("page1.doc73"));
      this.$router.go(-1);
    },
    setLang(lan) {
      this.currLan = lan;
      sessionStorage.removeItem("location_lng");
      sessionStorage.removeItem("location_lat");
      this.onBtn();
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  background: #151515;
  min-height: 100vh;
}

ul {
  li {
    background: #26292d;
    border-radius: 0.16rem;
    margin-top: 0.2rem;
    height: 0.8rem;
    padding: 0.24rem;

    > img {
      height: 0.4rem;
    }

    .name {
      font-size: 0.32rem;
      font-weight: 500;
      color: var(--COcolor3);
      line-height: 0.62rem;
    }

    .ico {
      img {
        width: 0.28rem;
      }
    }
  }
}
</style>
